<template>

  <div>
    <div class="outdiv biaoti">品牌管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">

    <el-row>
      <template>
        <el-dialog title="增加汽车品牌" :visible.sync="addVisible" class="title" >
          <el-form :modal="addVal" @submit.native.prevent>
            <el-form-item label="汽车品牌名称" label-width="200">
              <el-input v-model="addVal.qiCheName" @blur="addpanDing"></el-input>
              <div style="color: red">{{addtishi}}</div>
            </el-form-item>
            <el-form-item>
              <el-button @click="quxiaoAdd">取 消</el-button>
              <el-button type="primary" @click="queRenAdd" :disabled="addzhuangTai">确定增加</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </template>
    </el-row>

    <div class="outdiv">
      <el-button icon="el-icon-plus" @click="addqiChe" type="primary" plain>添加汽车品牌</el-button>
    </div>

    <div class="outdiv">
      <el-table :data="dangqianyeTableData" border style="width: 100%"
                v-loading="loading"
                element-loading-text="拼命加载中"
      >
        <el-table-column fixed prop="brand_id" label="编号" min-width="150">
        </el-table-column>
        <el-table-column prop="brand_name" label="汽车品牌" min-width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="update(scope)" type="danger" plain size="small" icon="el-icon-edit" circle></el-button>
            <el-dialog title="修改汽车品牌" :visible.sync="dialogFormVisible" :append-to-body='true' class="title">
              <el-form :model="upCarData">

                <el-form-item label="编号" label-width="160">
                  <el-input v-model="upCarData.id" disabled></el-input>
                </el-form-item>

                <el-form-item label="汽车品牌" label-width="160">
                  <el-input v-model="upCarData.name" @blur="updapanDing"></el-input>
                  <div style="color: red">{{updatishi}}</div>
                </el-form-item>

              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="quxiaoup">取消</el-button>
                <el-button type="primary" @click="quedingupDate" :disabled="updazhuangtai">确定</el-button>
              </div>
            </el-dialog>

          </template>
        </el-table-column>

      </el-table>
    </div>

    <el-pagination background align="center" :current-page="elPage" @current-change=elChangePage :page-size=pageSize
      layout="prev,pager,next" :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
  import * as api from '../../utils/api'
  import Mmixin from "../../utils/mixin"
  import Login from "../Login";
  export default {
    name: "pingpai",
    mixins: [Mmixin],
    data() {
      return {
        pageSize: 4,
        elPage: 1,
        dangqianyema: 1,
        tableData: [],
        addVisible: false,
        dialogFormVisible: false,
        addzhuangTai: true,
        updazhuangtai: true,
        addtishi: '',
        updatishi: '',
        upCarData: {
          id: '',
          name: ''
        },
        addVal: {
          qiCheName: ''
        },
      loading:false,
      }
    },
    created() {
      this.GX()
    },
    methods: {
      GX() {
        this.loading=true;
        this.axios({
          url: api.GET_FINDBRAND,
          method: 'get',
        }).then(data => {
          this.tableData = data.data.data;
          this.loading=false
        })
      },
      addpanDing() {
        this.addtishi = '';
        this.addzhuangTai = true;
        this.axios({
          url: api.GET_FINDBRAND,
          method: 'get',
        }).then(data => {
          if (this.addVal.qiCheName !== '') {
            for (let i = 0; i < data.data.data.length; i++) {
              if (this.addVal.qiCheName === data.data.data[i].brand_name) {
                this.addtishi = '已有此品牌汽车';
                this.addzhuangTai = true;
              }
            }
            if (this.addtishi !== '已有此品牌汽车') {
              this.addzhuangTai = false;
              this.addtishi = '';
            }
          } else if (this.addVal.qiCheName === '') {
            this.addtishi = '请填写品牌信息';
            this.addzhuangTai = true;
          }
        });
      },
      updapanDing() {
        this.updatishi = '';
        this.updazhuangtai = true;
        this.axios({
          url: api.GET_FINDBRAND,
          method: 'get',
        }).then(data => {
          if (this.upCarData.name !== '') {
            for (let i = 0; i < data.data.data.length; i++) {
              if (this.upCarData.name === data.data.data[i].brand_name) {
                this.updatishi = '已有此品牌汽车';
                this.updazhuangtai = true;
              }
            }
            if (this.updatishi !== '已有此品牌汽车') {
              this.updazhuangtai = false;
              this.updatishi = '';
            }
          } else if (this.upCarData.name === '') {
            this.updatishi = '请填写品牌信息';
            this.updazhuangtai = true;
          }
        })

      },
      addqiChe() {
        this.addVisible = true;
      },
      quxiaoAdd() {
        this.addVisible = false;
        this.addVal.qiCheName = '';
        this.addzhuangTai = true;
        this.addtishi = '';
      },
      queRenAdd() {
        this.axios({
          url: api.POST_ADDBRAND,
          method: 'post',
          data: {
            brandName: this.addVal.qiCheName
          }
        }).then(data => {
          if (data.data.code === 200) {
            this.addVisible = false;
            this.$message({
              type: 'info',
              message: data.data.msg
            });
            this.GX();
          } else {
            alert('修改失败请重新修改')
          }
        }).catch(() => {
          this.addVisible = false;
          alert('后台服务错误，请联系管理员')
        })
      },
      update(scope) {
        this.dialogFormVisible = true;
        this.upCarData.id = Number(scope.row.brand_id);
        this.upCarData.name = scope.row.brand_name;
      },
      quxiaoup() {
        this.dialogFormVisible = false;
        this.updazhuangtai = false;
        this.updatishi = '';
      },
      quedingupDate() {
        this.axios({
          url: api.POST_UPDATEBRAND,
          method: 'post',
          data: {
            brandId: this.upCarData.id,
            brandName: this.upCarData.name,
          }
        }).then(data => {
          // console.log(data);
          if (data.data.code === 200) {
            this.$message({
              type: 'info',
              message: '修改成功'
            });
            this.dialogFormVisible = false;
            this.GX();
          } else {
            alert('修改失败请重新修改')
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
</style>